<template>
  <MyDialog
    v-model="isVisible"
    :size="'middle'"
    :type="type"
    class="audit-dialog-wrapper"
    :dialog-title="dialogTitle"
    :need-modal="needModal"
    @closed="closed"
  >
    <my-form
      ref="ruleForm"
      v-model="dataForm"
      label-width="120px"
      :disabled="currentRow.type === 'detail'"
      :model="dataForm"
      :is-grid="false"
      :items-datas="state.itemsDatas"
    >
    </my-form>
    <template #footer>
      <my-button type="reset" title="关闭" @click="closed" />
      <my-button v-if="currentRow.type !== 'detail'" type="save" title="保存" :loading="buttonLoading" @click="submitForm" />
    </template>
  </MyDialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { getContact, addContact, updateContact } from '@/api/yuanshidian/contact';
import { dwnamelist } from '@/api/yuanshidian/ab01';

const { proxy } = getCurrentInstance();
const props = defineProps(
  {
    dialogTitle: {
      type: String,
      default: '弹窗标题'
    },
    needModal: {
      type: Boolean,
      default: true
    },
    modelValue: {
      type: Boolean,
      default: false
    },
    currentRow: {
      type: Object,
      default: () => {}
    }
  },
  ['modelValue']
);
const buttonLoading = ref(false);
const ruleForm = ref<ElFormInstance>();
const state = reactive({
  dataForm: {
    id: '',
    grbh: '',
    name: '',
    identificationCard: '',
    zcdw: '',
    zrdw: ''
  },
  itemsDatas: [
    { label: '个人编号', prop: 'grbh', type: 'input', span: 24 },
    { label: '姓名', prop: 'name', type: 'input', span: 24 },
    { label: '身份证号', prop: 'identificationCard', type: 'input', span: 24 },
    { label: '转出单位', prop: 'zcdw', type: 'input', span: 24 },
    { label: '转入单位', prop: 'zrdw', type: 'select', span: 24, options: [], labelKey: 'dw02', valueKey: 'dw02', filterable: true }
  ]
});
const { dataForm, itemsDatas } = toRefs(state);
const isVisible = ref(false);
watch(
  () => props.modelValue,
  async (v) => {
    isVisible.value = v;
    if (v) {
      if (props.currentRow.id) {
        var res = await getContact(props.currentRow.id);
        Object.keys(dataForm.value).forEach((item) => {
          dataForm.value[item] = res.data[item];
        });
      }
      var el = await dwnamelist({});
      itemsDatas.value.find((item) => item.prop === 'zrdw').options = el;
    }
  },
  { immediate: true, deep: true }
);
const emit = defineEmits(['update:modelValue', 'handleQuery']);
const closed = () => {
  reset();
  emit('update:modelValue');
};
/** 表单重置 */
const reset = () => {
  dataForm.value.id = '';
  ruleForm.value?.resetFields();
};

/** 提交按钮 */
const submitForm = () => {
  ruleForm.value?.validate(async (valid) => {
    if (valid) {
      buttonLoading.value = true;
      if (dataForm.value.id) {
        await updateContact(dataForm.value).finally(() => (buttonLoading.value = false));
      } else {
        await addContact(dataForm.value).finally(() => (buttonLoading.value = false));
      }
      proxy?.$modal.msgSuccess('操作成功');
      emit('handleQuery');
      closed();
    }
  });
};
</script>
